import MainScene from '@/three/Main';
import { BasicItemInfo } from '@/three/Main/scene/BasicScene';
import CenterLogoScene from '@/three/Main/scene/CenterLogoScene';
import GetStaticResource from '@/utils/GetStaticResource';
import { createRef, useEffect } from 'react';
import Styles from './index.module.scss';
import ItemScene, { ItemSceneInfo } from '@/three/Main/scene/ItemScene';
import LoadModel from '@/three/utils/LoadModel';
import LoadModelFromImage from '@/three/utils/LoadModelFromImage';

// center logo

const [CenterLogoModel] = await LoadModel(
  GetStaticResource('/assets/three/PdcLogo/PdcLogoModel.mtl'),
  GetStaticResource('/assets/three/PdcLogo/PdcLogoModel.obj'),
);
CenterLogoModel.scale.set(10, 10, 10);

// momoPhone
const [MomoPhoneModel] = await LoadModel(
  GetStaticResource('/assets/three/momoPhone/momo_phone_binding.mtl'),
  GetStaticResource('/assets/three/momoPhone/momo_phone_binding.obj'),
);
MomoPhoneModel.scale.set(10, 10, 10);

// KRM-963-53

const [KRMModel] = await LoadModel(
  GetStaticResource('/assets/three/KRM-963-53/KRM-963-53.mtl'),
  GetStaticResource('/assets/three/KRM-963-53/KRM-963-53.obj'),
);
KRMModel.scale.set(1.7, 1.7, 1.7);

// plunger
const [PlungerModel] = await LoadModel(
  GetStaticResource('/assets/three/Plunger/Plunger.mtl'),
  GetStaticResource('/assets/three/Plunger/Plunger.obj'),
);
PlungerModel.scale.set(5, 5, 5);

// shop
const [ShopBaiscModel] = await LoadModel(
  GetStaticResource('/assets/three/PointsStore/PointsStore.mtl'),
  GetStaticResource('/assets/three/PointsStore/PointsStore.obj'),
);
ShopBaiscModel.scale.set(3, 3, 3);

// ahego
const [ahoge] = await LoadModelFromImage('/src/assets/three/ahoge/red_ahoge.png');

ahoge.scale.set(0.3, 0.3, 0.3);
ahoge.rotateX(Math.PI);

const ModelList: Record<string, BasicItemInfo> = {
  logo: {
    objs: [
      {
        obj: CenterLogoModel,
      },
    ],
  },
};

const ItemModelList: Record<string, ItemSceneInfo> = {
  KRM: {
    objs: [
      {
        obj: KRMModel,
      },
    ],
  },
  momo: {
    objs: [
      {
        obj: MomoPhoneModel,
      },
    ],
    onBeforeChangeCameraPosition({ P, R }) {
      return {
        P: { x: P.x * 0.75, y: P.y * 0.8, z: P.z * 0.75 },
        R: {
          x: R.x,
          y: R.y - Math.PI * 1.82,
          z: R.z,
        },
      };
    },
  },
  shop: {
    objs: [
      {
        obj: ShopBaiscModel,
      },
    ],
  },
  plunger: {
    objs: [{ obj: PlungerModel }],
  },
  ahoge: {
    objs: [
      {
        obj: ahoge,
      },
    ],
  },
};

function PThreeSimulation() {
  const e = createRef<HTMLCanvasElement>();
  useEffect(() => {
    const scene = new MainScene({
      canvas: e.current,
    });
    const CenterLogoSceneInstance = new CenterLogoScene({
      camera: scene.camera,
      scene: scene.scene,
      renderer: scene.renderer,
      CameraPosition: {
        about: {
          rotation: { x: 0, y: -Math.PI * 0.02, z: 0 },
          position: {
            x: 12,
            y: 8,
            z: 22,
          },
        },
        list: {
          rotation: { x: 0, y: Math.PI * 0.02, z: 0 },
          position: {
            x: -12,
            y: 8,
            z: 22,
          },
        },
      },
      id: 'CenterLogoScene',
      ItemList: ModelList,
      canvas: e.current!,
    });
    const ItemSceneInstance = new ItemScene({
      id: 'ItemScene',
      camera: scene.camera,
      scene: scene.scene,
      renderer: scene.renderer,
      ItemList: ItemModelList,
      canvas: e.current!,
      radius: 50,
    });
    scene.AddScene(CenterLogoSceneInstance);
    scene.AddScene(ItemSceneInstance);

    // @ts-expect-error
    window._THREE_SCENE_ = scene;
    // @ts-expect-error
    window._THREE_CAMERA_ = scene.camera;
    // @ts-expect-error
    window._THREE_ITEM_SCENE_ = ItemSceneInstance;
    // @ts-expect-error
    window._THREE_LOGO_SCENE_ = CenterLogoSceneInstance;

    // ItemSceneInstance.ChangeShowItem('KRM');

    setTimeout(() => {
      // ItemSceneInstance.Enter3DView();
    }, 3000);
    // setTimeout(() => {
    //   CenterLogoSceneInstance.ChangeCameraPosition('about');
    //   setTimeout(() => {
    //     CenterLogoSceneInstance.ChangeCameraPosition('list');
    //   }, 5000);
    // }, 1000);
  }, []);
  return (
    <div className={Styles.p_three_simulation}>
      <canvas ref={e}></canvas>
    </div>
  );
}

export default PThreeSimulation;
